<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<!-- My profile -->
		<div style="height: 150px; width: 100%" class=""></div>
		<div class="profile">
			<div class="profileTit">My profile</div>
			<div class="profileCount f f-j-b">
				<div class="leftImg f f-a-c">
					<div class="centerCon f f-a-c f-d-c">
						<div class="avaImg">
							<img :src="obj.avatar || ''" style="object-fit: cover" class="touImg" alt="" />
							<img src="/src/assets/user/5.png" class="icon" alt="" />
						</div>
						<div class="gavin">{{ obj.firstName }} {{ obj.lastName }}</div>
					</div>
					<div class="count">
						<div class="topL f f-a-c">
							<div class="name">Location</div>
							<div class="conNei">{{ obj.countryName || "--" }} {{ obj.stateName || "--" }} {{ obj.cityName || "--" }}</div>
						</div>
						<div class="topL f f-a-c">
							<div class="name">Industry</div>
							<div class="conNei">{{ obj.sectorName || "--" }} {{ obj.industryName || "--" }}</div>
						</div>
						<div class="topL f f-a-c">
							<div class="name">Title</div>
							<div class="conNei">{{ obj.title || "--" }}</div>
						</div>
						<div v-if="obj.language" class="topL f f-a-c">
							<div class="name">Language</div>
							<div class="conNei">{{ obj.language.join(",") }}</div>
						</div>
						<div class="topL f f-a-c">
							<div class="name">Local time</div>
							<div class="conNei">{{ getTimes(obj.lastLogin) }}</div>
						</div>
					</div>
				</div>
				<div class="rigBrn f">
					<div @click="goUserinfo" class="view hand">View</div>
					<!-- <div @click="router.push('/KnowClubProfile')" class="view hand">Edit</div> -->
					<div @click="router.push('/BuyKnowUseMyProfile')" class="view hand">Edit</div>
				</div>
			</div>
		</div>
		<!-- About me -->
		<div class="aboutMe">
			<div class="aboutMeTit">About me</div>
			<div class="count">
				{{ obj.myDescribe }}
			</div>
		</div>
		<!-- Work experience  -->
		<div class="aboutMe">
			<div class="aboutMeTit">Work experience</div>
			<div v-for="(item, index) in obj.workExperience" :key="index" class="experience f f-a-c f-j-b">
				<div class="presentLef">{{ item?.time }} {{ item?.position }} @{{ item?.company }}</div>
				<div class="presentRig">{{ item?.location }}</div>
			</div>
		</div>
		<!-- Education  experience   -->
		<div v-if="obj.educationExperience" class="aboutMe">
			<div class="aboutMeTit">Education experience</div>
			<div v-for="(ite, index) in obj.educationExperience" :key="index" class="experience f f-a-c f-j-b">
				<div class="presentLef">{{ ite?.school }}</div>
				<div class="presentRig">{{ ite?.degree }}</div>
			</div>
		</div>
		<!-- Certificate  -->
		<div class="aboutMe">
			<div class="aboutMeTit">About me</div>
			<div class="imgList f f-a-c f-w-w">
				<img v-for="(item, index) in obj.certificateImages" style="object-fit: cover" key="index" :src="item" class="bgCom" alt="" />
			</div>
		</div>
		<div class="" style="height: 50px"></div>
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { SellerUserDetails } from "@/api/knowClub/index.js";
	import { ref, onMounted } from "vue";
	import { getTimes } from "../../../utils/setting.js";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	let statusTab = ref(1);
	let obj = ref({});
	let id = JSON.parse(localStorage.getItem("logininfo") || "{}").userIdKc;
	onMounted(() => {
		myList();
		window.addEventListener("scroll", handleScroll);
	});
	const goUserinfo = () => {
		console.log("666666666666666666666666666");
		router.push({
			path: "/PersonalHomepage",
			query: {
				id: id
			}
		});
	};
	const myList = async () => {
		let n = await SellerUserDetails({ userId: id });
		obj.value = n.data;
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
</style>
